Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / messages / AddImageButton.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD AND MIT -->

Tff7b72<templateTff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffinline-flexTa5d6ff"Tff7b72>

Tff7b72<button

Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffmy-auto inline-flex items-center gap-x-1 rounded-full border border-gray-200 dark:border-zinc-700 bg-white/90 dark:bg-zinc-900/80 px-3 py-1.5 text-xs font-semibold text-gray-800 dark:text-gray-100 shadow-sm hover:border-blue-400 dark:hover:border-blue-500 transitionTa5d6ff"

@Te6edf3click=Ta5d6ff"Ta5d6ffshowMenuTa5d6ff"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffimage-plusTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffw-4 h-4Ta5d6ff" Tff7b72/>

Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffhidden xl:inline-block whitespace-nowrapTa5d6ff"Tff7b72>Add ImageTff7b72</span>

Tff7b72</button>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffrelative blockTa5d6ff"Tff7b72>

Tff7b72<Transition

Te6edf3enter-active-class=Ta5d6ff"Ta5d6fftransition ease-out duration-100Ta5d6ff"

Te6edf3enter-from-class=Ta5d6ff"Ta5d6fftransform opacity-0 scale-95Ta5d6ff"

Te6edf3enter-to-class=Ta5d6ff"Ta5d6fftransform opacity-100 scale-100Ta5d6ff"

Te6edf3leave-active-class=Ta5d6ff"Ta5d6fftransition ease-in duration-75Ta5d6ff"

Te6edf3leave-from-class=Ta5d6ff"Ta5d6fftransform opacity-100 scale-100Ta5d6ff"

Te6edf3leave-to-class=Ta5d6ff"Ta5d6fftransform opacity-0 scale-95Ta5d6ff"

Tff7b72>

Tff7b72<div

Te6edf3v-if=Ta5d6ff"Ta5d6ffisShowingMenuTa5d6ff"

Te6edf3v-click-outside=Ta5d6ff"Ta5d6ffhideMenuTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffabsolute bottom-0 -ml-11 sm:right-0 sm:ml-0 z-10 mb-10 rounded-xl bg-white dark:bg-zinc-900 shadow-lg ring-1 ring-gray-200 dark:ring-zinc-800 focus:outline-noneTa5d6ff"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffpy-1Ta5d6ff"Tff7b72>

Tff7b72<button

Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffw-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrapTa5d6ff"

@Te6edf3click=Ta5d6ff"Ta5d6ffaddImage(Ta5d6ff'Ta5d6fflowTa5d6ff'Ta5d6ff)Ta5d6ff"

Tff7b72>

Low Quality (320x320)

Tff7b72</button>

Tff7b72<button

Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffw-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrapTa5d6ff"

@Te6edf3click=Ta5d6ff"Ta5d6ffaddImage(Ta5d6ff'Ta5d6ffmediumTa5d6ff'Ta5d6ff)Ta5d6ff"

Tff7b72>

Medium Quality (640x640)

Tff7b72</button>

Tff7b72<button

Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffw-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrapTa5d6ff"

@Te6edf3click=Ta5d6ff"Ta5d6ffaddImage(Ta5d6ff'Ta5d6ffhighTa5d6ff'Ta5d6ff)Ta5d6ff"

Tff7b72>

High Quality (1280x1280)

Tff7b72</button>

Tff7b72<button

Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffw-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrapTa5d6ff"

@Te6edf3click=Ta5d6ff"Ta5d6ffaddImage(Ta5d6ff'Ta5d6fforiginalTa5d6ff'Ta5d6ff)Ta5d6ff"

Tff7b72>

Original Quality

Tff7b72</button>

Tff7b72</div>

Tff7b72</div>

Tff7b72</Transition>

Tff7b72</div>

T8b949e<!-- hidden file input for selecting files -->

Tff7b72<input Te6edf3ref=Ta5d6ff"Ta5d6ffimage-inputTa5d6ff" Te6edf3type=Ta5d6ff"Ta5d6fffileTa5d6ff" Te6edf3accept=Ta5d6ff"Ta5d6ffimage/*Ta5d6ff" Te6edf3style=Ta5d6ff"Ta5d6ffdisplay: noneTa5d6ff" @Te6edf3change=Ta5d6ff"Ta5d6ffonImageInputChangeTa5d6ff" Tff7b72/>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import Compressor from "compressorjs";

import DialogUtils from "../../js/DialogUtils";

import MaterialDesignIcon from "../MaterialDesignIcon.vue";

export default {

name: "AddImageButton",

components: {

MaterialDesignIcon,

},

emits: ["add-image"],

data() {

return {

isShowingMenu: false,

selectedImageQuality: null,

};

},

methods: {

showMenu() {

this.isShowingMenu = true;

},

hideMenu() {

this.isShowingMenu = false;

},

addImage(quality) {

this.isShowingMenu = false;

this.selectedImageQuality = quality;

this.$refs["image-input"].click();

},

clearImageInput: function () {

this.$refs["image-input"].value = null;

},

onImageInputChange: async function (event) {

if (event.target.files.length > 0) {

// get selected file

const file = event.target.files[0];

// process file based on selected image quality

switch (this.selectedImageQuality) {

case "low": {

new Compressor(file, {

maxWidth: 320,

maxHeight: 320,

quality: 0.2,

mimeType: "image/webp",

success: (result) => {

// ensure result is a File with the same name as original

const compressedFile = new File([result], file.name, { type: result.type });

this.$emit("add-image", compressedFile);

},

error: (err) => {

DialogUtils.alert(err.message);

},

});

break;

}

case "medium": {

new Compressor(file, {

maxWidth: 640,

maxHeight: 640,

quality: 0.6,

mimeType: "image/webp",

success: (result) => {

// ensure result is a File with the same name as original

const compressedFile = new File([result], file.name, { type: result.type });

this.$emit("add-image", compressedFile);

},

error: (err) => {

DialogUtils.alert(err.message);

},

});

break;

}

case "high": {

new Compressor(file, {

maxWidth: 1280,

maxHeight: 1280,

quality: 0.75,

mimeType: "image/webp",

success: (result) => {

// ensure result is a File with the same name as original

const compressedFile = new File([result], file.name, { type: result.type });

this.$emit("add-image", compressedFile);

},

error: (err) => {

DialogUtils.alert(err.message);

},

});

break;

}

case "original": {

this.$emit("add-image", file);

break;

}

default: {

DialogUtils.alert(`Unsupported image quality: ${this.selectedImageQuality}`);

break;

}

}

// clear image input to allow selecting the same file after user removed it

this.clearImageInput();

}

},

},

};

Tff7b72</script>